﻿
@{
    ViewBag.Title = @ViewBag.Post.Caption;
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

@section head{
    <style type="text/css">
        #commentBox {
            display: none;
        }
    </style>
}

<!---start-content---->
<div class="content">
    <div class="wrap">
        <div class="single-page">
            <div class="single-page-artical">
                <div class="artical-content">
                    <img src="@ViewBag.Post.DisplayUrl" title="banner1">
                    <hr />
                    <p>@ViewBag.Post.Caption</p>
                </div>
                <div class="artical-links" style="float: none;">
                    <ul>
                        <li>
                            <a href="#" onclick="return false">
                                <img src="~/Content/img/blog-icon4.png" title="Tag">
                            </a>
                        </li>
                        @foreach (var tag in ViewBag.Post.Tags)
                        {
                            <li>
                                <h3>
                                    <a href="/Post/Search/@tag">#@tag</a>
                                </h3>
                            </li>
                        }
                    </ul>
                </div>
                <div class="artical-links">
                    <ul>
                        <li>
                            <a href="/User/@ViewBag.Post.UserId">
                                <img src="~/Content/img/blog-icon2.png" title="Author">
                                <span>@ViewBag.Post.UserName</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="showCommentBox()">
                                <img src="~/Content/img/blog-icon3.png" title="Comments">
                                <span>Comments</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="like" onclick="return false">
                                @if (ViewBag.IsLiked)
                                {
                                    <img src="~/Content/img/liked.png" title="Unlike">
                                    <span>Unlike</span>
                                    <input type="hidden" value="1" id="isLiked" />
                                }
                                else
                                {
                                    <img src="~/Content/img/like.png" title="Like">
                                    <span>Like</span>
                                    <input type="hidden" value="0" id="isLiked" />
                                }
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="return false">
                                <img src="~/Content/img/date.png" title="Post Date">
                                <span>
                                    @ViewBag.Post.DateTime
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="share-artical">
                    <ul>
                        @*<li><a href="#"><img src="~/Content/img/facebooks.png" title="facebook">Facebook</a></li>
                                <li><a href="#"><img src="~/Content/img/twiter.png" title="Twitter">Twiiter</a></li>
                                <li><a href="#"><img src="~/Content/img/google+.png" title="google+">Google+</a></li>
                            <li><a href="#"><img src="~/Content/img/forward.png" title="rss">Repost</a></li>*@
                    </ul>
                </div>
                <div class="clear"> </div>
                <input type="hidden" value="@ViewBag.Post.Id" id="postId" />
            </div>

            <!---start-comments-section--->
            <div class="comment-section">
                <div class="grids_of_2">
                    <h2>Comments</h2>
                    <!--评论框-->
                    <div id="commentBox" class="artical-commentbox">
                        <h2>Leave a Comment</h2>
                        <div class="table-form">
                            <form action="#" method="post" name="post_comment">
                                @*<div>
                                        <label>Name<span>*</span></label>
                                        <input type="text" value=" ">
                                    </div>
                                    <div>
                                        <label>Email<span>*</span></label>
                                        <input type="text" value=" ">
                                    </div>*@
                                <div>
                                    <label>Your Comment<span>*</span></label>
                                    <textarea id="commentContent" maxlength="50"> </textarea>
                                </div>
                            </form>
                            <input type="submit" value="submit" id="btnAdd">

                        </div>
                        <div class="clear"> </div>
                    </div>
                    <input type="hidden" value="1" id="pageIndex" />
                    <div id="commentList">
                        @*@foreach (var commentItem in ViewBag.Comments)
                            {
                                <div class="grid1_of_2">
                                    <div class="grid_img">
                                        <a href="/User/@commentItem.UserId"><img src="@commentItem.UserIcon" alt="@commentItem.UserName"></a>
                                    </div>
                                    <div class="grid_text">
                                        <h4 class="style1 list"><a href="/User/@commentItem.UserId">@commentItem.UserName</a></h4>
                                        <h3 class="style">@commentItem.DateTime</h3>
                                        <p class="para top">@commentItem.Content</p>
                                        <a href="" class="btn1">Click to Reply</a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                            }*@
                    </div>

                </div>
            </div>
            <!---//End-comments-section--->

        </div>
    </div>
</div>
<!---end-content---->
@section script {

    <script type="text/javascript">
        var postId = $("#postId").val();
        $(function () {
            loadComment();
            //发表评论
            $("#btnAdd").click(function () {
                addComment();
            });
            $(window).scroll(function () {
                scrollFun();
            });
            $("#like").click(function () {
                postLike();
            });
        });
        function scrollFun() {
            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                //alert("滚动条已经到达底部为" + $(document).scrollTop());
                loadComment();
            }
        }
        //显示评论框
        function showCommentBox() {
            $("#commentBox").show();
            $('html, body').animate({
                scrollTop: $("#commentBox").offset().top
            }, 1000);
            $("#commentContent").focus();
        }
        //加载评论
        function loadComment() {
            var pageIndex = $("#pageIndex").val();
            if (pageIndex == 0) {
                return;
            }
            $.ajax({
                url: "/Post/LoadComment", dataType: "json",
                type: "post", data: { postId: postId, pageIndex: pageIndex },
                success: function (res) {
                    if (res.Status == "OK") {
                        //$("#commentList").text("");
                        for (var i = 0; i < res.Data.length; i++) {
                            $("#commentList").append('<div class="grid1_of_2"><div class="grid_img"><a href="/User/' + res.Data[i].UserId + '"><img style="border-radius: 50%;" src="' + res.Data[i].UserIcon + '" alt="' + res.Data[i].UserName + '"></a></div><div class="grid_text"><h4 class="style1 list"><a href="/User/' + res.Data[i].UserId + '">' + res.Data[i].UserName + '</a ></h4 ><h3 class="style">' + res.Data[i].DateTime + '</h3 ><p class="para top">' + res.Data[i].Content + '</p ></div><div class="clear"></div></div>');
                        }//<a href="" class="btn1">Click to Reply</a>
                        if (res.Data.length < 6) {
                            $("#pageIndex").val(0);
                        }
                        else {
                            $("#pageIndex").val(++pageIndex);
                        }
                    } else {

                    }
                }, error: function () {

                }
            });
        }
        //发表评论
        function addComment() {
            var msg = $("#commentContent").val();//获取编辑器内容
            if (msg != "") {
                var postId = $("#postId").val();
                $.post("/Post/Comment", { postId: postId, content: msg },
                    function (res) {
                        if (res.Status == "OK") {
                            $("html,body").animate({ scrollTop: 0 }, 500);
                            $("#commentList").html("");
                            $("#pageIndex").val(1);
                            loadComment();
                            $("#commentContent").val("");
                            $("#commentBox").hide();
                        }
                        if (res.Status == "Error") {
                            alert(res.ErrorMsg);
                        }
                    });
            } else {
                alert("The content of the comment is empty");
                $("#commentContent").focus();
            }
        }

        //Like或Unlike
        function postLike() {
            var isLiked = $("#isLiked").val();
            var url = "";
            if (isLiked == "1") {
                url = "/Post/Unlike";
            }
            else {
                url = "/Post/Like";
            }
            var postId = $("#postId").val();
            $.post(url, { postId: postId },
                function (res) {
                    if (res.Status == "OK") {
                        isLiked = isLiked == "1" ? "0" : "1";
                        if (isLiked == "0") {
                            $("#like").children("img").attr({
                                "src": "/Content/img/like.png",
                                "title": "Like"
                            });
                            $("#like").children("span").text("Like");
                        }
                        else {
                            $("#like").children("img").attr({
                                "src": "/Content/img/liked.png",
                                "title": "Unlike"
                            });
                            $("#like").children("span").text("Unlike");
                        }
                        $("#isLiked").val(isLiked);
                    }
                    if (res.Status == "Error") {
                        alert(res.ErrorMsg);
                    }
                });
        }
    </script>
}